<template>
    <el-table :data="tableData"
      style="width: 100%"
      border
      fit
      highlight-current-row
      >
        <el-table-column v-for= "item in list" :prop="item.prop" :label="item.lable" :width="item.width"  align="center" :key="item.id">
            <template slot-scope="scope">
                <template v-if="['number','power'].includes(item.prop)">{{scope.row[item.prop]}}</template>
                <template v-else><i :class="scope.row[item.prop] ?'el-icon-check':'el-icon-close'" :style="{'color':scope.row[item.prop] ? 'green':'red'}"></i></template>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
export default {
  data () {
    return {
      list: [
        { id: 1, prop: 'number', lable: 'ID', width: '180' },
        { id: 2, prop: 'power', lable: '权限', width: '180' },
        { id: 3, prop: 'user', lable: '用户管理', width: '' },
        { id: 4, prop: 'buy', lable: '采购管理', width: '' },
        { id: 5, prop: 'order', lable: '订单管理', width: '' },
        { id: 6, prop: 'warehouse', lable: '仓库管理', width: '' },
        { id: 7, prop: 'info', lable: '档案管理', width: '' },
        { id: 8, prop: 'pay', lable: '财务管理', width: '' }
      ],
      tableData: [
        {
          number: '1',
          user: true,
          buy: true,
          order: true,
          warehouse: true,
          info: true,
          pay: true,
          power: '超级管理员'
        },
        {
          number: '2',
          user: false,
          buy: true,
          order: true,
          warehouse: true,
          info: false,
          pay: true,
          power: '采购'
        },
        {
          number: '3',
          user: false,
          buy: true,
          order: true,
          warehouse: true,
          info: false,
          pay: false,
          power: '仓库管理员'
        },
        {
          number: '4',
          user: false,
          buy: true,
          order: true,
          warehouse: true,
          info: false,
          pay: true,
          power: '文职'
        }
      ]
    }
  }
}
</script>

<style module>
</style>
